<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="password_top">
      <view
        class="password"
        style="display: flex; justify-content: flex-start; align-items: center"
      >
        <text style="color: #fbda96">+86</text>
        <view
          style="
            width: 2rpx;
            background-color: #262934;
            height: 30rpx;
            margin: 0 20rpx;
          "
        ></view>
        <input
          type="text"
          placeholder="输入手机号"
          v-model="account"
          placeholder-style="font-size: 28rpx;"
          style="font-size: 28rpx; flex: 2"
          @input="graphicalcode"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>

      <block>
        <view
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view class="passwords" style="flex: 2">
            <input
              type="text"
              placeholder="输入图形验证码"
              v-model="graphical"
              style="font-size: 28rpx; flex: 2"
              placeholder-style="font-size: 28rpx;"
            />
          </view>
          <image
            src="../../static/graphical.png"
            mode=""
            v-if="graphicalimg == ''"
            style="
              width: 220rpx;
              height: 80rpx;
              margin-right: 30rpx;
              border-radius: 16rpx;
            "
          ></image>
          <image
            :src="graphicalimg"
            mode=""
            style="
              width: 220rpx;
              height: 80rpx;
              margin-right: 30rpx;
              border-radius: 16rpx;
            "
            @click="graphicalcode"
            v-else
          ></image>
          <!-- <canvas style="width:220rpx;height:80rpx;" canvas-id="canvas" @click="updateImageCode"></canvas> -->
        </view>
      </block>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>

      <view class="passwords">
        <!-- <input type="text" placeholder="请填写获取的验证码" v-model="code" >
					<view style="width: 2rpx;background-color:#262934;height: 30rpx;margin-left: 150rpx;"></view>
				<view>
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
					@change="codeChange"></u-verification-code>
					<text @click="$u.debounce(getCode, 1000, true)" style="margin-right: 0rpx;color: #FBDA96;" :style="timer?'margin-right: 20rpx;':''">{{tips}}</text>
				</view> -->
        <input
          type="number"
          placeholder="请填写获取的验证码"
          v-model="code"
          style="font-size: 28rpx; flex: 2"
          placeholder-style="font-size: 28rpx;"
        />
        <u-verification-code
          :seconds="seconds"
          ref="uCode"
          @change="codeChange"
        ></u-verification-code>
        <view style="display: flex; align-items: center">
          <view
            style="
              width: 2rpx;
              height: 30rpx;
              background-color: #262934;
              margin-right: 15rpx;
            "
          ></view>
          <text
            @click="$u.debounce(getCode, 1000, true)"
            style="color: #fbda96; font-size: 28rpx; white-space: normal"
            >{{ tips }}</text
          >
        </view>
      </view>
    </view>
    <view class="password_top" style="margin-top: 30rpx">
      <view class="password">
        <input
          type="password"
          placeholder="输入新密码"
          v-model="newpassword"
          placeholder-style="font-size: 28rpx;"
          style="font-size: 28rpx"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
      <view class="password">
        <input
          type="password"
          placeholder="确认新密码"
          v-model="newpasswords"
          placeholder-style="font-size: 28rpx;"
          style="font-size: 28rpx"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
    </view>
    <view class="password_center">
      <!-- <text>密码必须是8-16位英文字母、数字（不能是纯数字）</text> -->
      <text>密码必须是6-16位</text>
    </view>
    <view class="button" @click="Submit"> 确定 </view>
  </view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      account: "",
      code: "",
      newpassword: "",
      newpasswords: "",
      tips: "",
      // refCode: null,
      seconds: 60,
      timer: false,
      graphicalimg: "",
      graphical: "",
    };
  },
  methods: {
    async graphicalcode() {
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        return;
      }
      let res = await api.graphicalcode({
        query: {
          key: this.account,
        },
        method: "get",
      });
      this.graphicalimg = res.data;
      console.log(res);
    },
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (!this.timer) {
        if (this.account == "") {
          this.$refs.uToast.show({
            title: "请填写手机号",
          });
          return;
        }
        if (!/^1[3456789]\d{9}$/.test(this.account)) {
          this.$refs.uToast.show({
            title: "请填写正确手机号",
          });
          return;
        }
        if (this.graphical == "") {
          this.$refs.uToast.show({
            title: "请填写图形验证码",
          });
          return;
        }
        let phone = await api.sendCodeSms({
          query: {
            account: this.account,
            type: 2,
            img_code: this.graphical,
          },
          method: "post",
        });
        console.log(phone, "msgmsgmsgmsg");
        if (phone.code == 0) {
          console.log(phone.msg, "msgmsgmsgmsg");
          this.$refs.uToast.show({
            title: phone.msg,
            type: "success",
          });
        } else {
          this.graphicalcode();
          this.$refs.uToast.show({
            title: phone.msg,
            type: "error",
          });
          return;
        }
        this.timer = true;
        this.tips = this.seconds;
        var time = setInterval(() => {
          this.tips--;
          if (this.tips <= 0) {
            clearInterval(time);
            this.tips = "重新获取";
            this.timer = false;
          }
        }, 1000);
      } else {
        this.$refs.uToast.show({
          title: "已发送短信",
          // 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
          // type: 'success',
          // 如果不需要图标，请设置为false
          // icon: false
        });
      }
    },
    toforget() {
      uni.navigateTo({
        url: "../forget_password/forget_password",
      });
    },
    async Submit() {
      if (this.account == "") {
        this.$refs.uToast.show({
          title: "请填写手机号",
        });
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        this.$refs.uToast.show({
          title: "请填写正确手机号",
        });
        return;
      }
      if (this.code == "") {
        this.$refs.uToast.show({
          title: "请填写验证码",
        });
        return;
      }
      if (this.newpassword == "") {
        this.$refs.uToast.show({
          title: "请填写新密码",
        });
        return;
      }
      if (this.newpassword.length < 6 || this.newpassword.length > 16) {
        this.$refs.uToast.show({
          title: "新密码需要6-16位",
        });
        return;
      }
      if (this.newpasswords == "") {
        this.$refs.uToast.show({
          title: "请确认新密码",
        });
        return;
      }
      // var filter = /^(?=.*[0-9\!@#\$%\^&\*])(?=.*[a-zA-Z]).{8,16}$/;
      // let blnTest = filter.test(this.newpassword);
      // if (!blnTest) {
      //   this.$refs.uToast.show({
      //     title: "密码格式错误",
      //   });
      //   return;
      // }

      if (this.newpasswords != this.newpassword) {
        this.$refs.uToast.show({
          title: "密码不一致",
        });
        return;
      }
      let res = await api.forgetPassword({
        query: {
          account: this.account,
          code: this.code,
          password: this.newpasswords,
        },
        method: "post",
      });
      if (res.code == 0) {
        this.$refs.uToast.show({
          title: "修改成功",
          type: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
          });
        }, 500);
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: 100vh;
}
.password_top {
  border: 2rpx solid #262934;
  margin: 0 30rpx;
  background-color: $bg-color3;
  border-radius: 25rpx;
  position: relative;
  top: 50rpx;
  font-size: 28rpx;
}
.password {
  /* display: flex;
		justify-content: space-between;
		align-items: center; */
  color: #ffffff;
  margin: 20rpx 30rpx;
  padding: 5rpx 0;
  /* min-height: 50rpx; */
}
.passwords {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin: 20rpx 30rpx;
  min-height: 50rpx;
}
.password_center {
  position: relative;
  top: 50rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30rpx;
  font-size: 28rpx;
}
.button {
  position: relative;
  top: 100rpx;
  margin: 30rpx;
  height: 90rpx;

  color: $text-color4;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;

  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
}
</style>
